<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.carrier"></el-input>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select v-model="form.settlementStatus" placeholder="请选择">
          <el-option label="未结算" value="1">未结算</el-option>
          <el-option label="部分结算" value="2">部分结算</el-option>
          <el-option label="结算完成" value="3">结算完成</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.former" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择时间" v-model="form.hoo" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="reconciliationNumber"
          label="对账单号">
      </el-table-column>
      <el-table-column
          prop="carrier"
          label="客户">
      </el-table-column>
      <el-table-column
          prop="settlementStatus"
          label="结算状态">
        <template slot-scope="scope">
          <span v-if="scope.row.settlementStatus==1">未结算</span>
          <span v-if="scope.row.settlementStatus==2">部分结算</span>
          <span v-if="scope.row.settlementStatus==3">结算完成</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="totalOrders"
          label="订单总数量">
      </el-table-column>
      <el-table-column
          prop="goodsQuantity"
          label="货物数量">
      </el-table-column>
      <el-table-column
          prop="totalGoodsVolume"
          label="货物总体积"m>
      </el-table-column>
      <el-table-column
          prop="totalGoodsWeight"
          label="货物总重量">
      </el-table-column>
      <el-table-column
          prop="payableAmount"
          label="应付总金额">
      </el-table-column>
      <el-table-column
          prop="actualPaymentAmount"
          label="实付总金额">
      </el-table-column>
      <el-table-column
          prop="creator"
          label="创建人">
      </el-table-column>
      <el-table-column
          prop="creationTime"
          label="创建时间">
        <template slot-scope="scope">{{ scope.row.creationTime }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pages"
        :page-sizes="[10,11,12,13]"
        :page-size="form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      form:{
        pages:1,
        size:10,
        carrier: '',
        settlementStatus: '',
        former: '',
        hoo: ''
      },
      tableData: [],
      total: 0,
    }
  },
  created(){
    this.onSubmit();
  },
  methods:{
    onSubmit(){
      console.log(this.form)
      axios.post("http://localhost:10086/finance/payable/gitAll", this.form).then(res=>{
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.size = val;
      this.onSubmit()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pages = val;
      this.onSubmit()
    },
    handleClick(row) {
      // 跳转到 housekeeping 页面，并传递 reconciliationId 参数
      this.$router.push( { name: 'Copes' , query: { reconciliationNumber: row.reconciliationNumber }});
    }
  }
}
</script>

